<template>
	<div class="contain">
		<div class="center-contain">
			<div
				class="search-center"
				:class="screenWidth > 768 ? 'webWidth' : 'h5Width'"
			>
				<el-tag
					class="buzzTypeTag"
					style="cursor: pointer"
					@click="buzzTypeClick(item)"
					v-for="item in buzzTypeItems"
					:key="item.label"
					:type="item.type"
					:effect="item.effect"
				>
					{{ item.label }}
				</el-tag>
				<el-button
					v-if="screenWidth > 768"
					style="padding-left: 8px; color: #409eff"
					type="text"
					icon="el-icon-edit-outline"
					@click="newBuzzClick()"
					>{{ $t('buzz_004') }}</el-button
				>
				<el-button
					v-if="screenWidth > 768"
					style="padding-left: 5px; color: #e6a23c"
					type="text"
					icon="el-icon-edit-outline"
					@click="newBlogClick()"
					>Blog</el-button
				>
				<el-button
					v-if="false"
					v-show="screenWidth > 768"
					style="padding-left: 10px"
					type="text"
					icon="el-icon-refresh"
					@click="refreshClick()"
					>{{ $t('me_022') }}</el-button
				>
			</div>

			<NewBuzzList v-show="buzzType.type == 'New'" ref="NewBuzzRef" />
			<NewBlogList v-show="buzzType.type == 'NewBlog'" ref="NewBlogRef" />
			<FolloBuzzList v-show="buzzType.type == 'Follow'" ref="FollowBuzzRef" />

			<NewBuzzDialog
				:visible.sync="showNewBuzzDialog"
				@newBuzzSuccess="newBuzzSuccess"
			/>
			<NewBlogDialog
				:visible.sync="showNewBlogDialog"
				@newBlogSuccess="newBlogSuccess"
			/>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import NewBuzzList from './newBuzzList'
import NewBlogList from './newBlogList'
import FolloBuzzList from './followBuzzList'
import NewBuzzDialog from './dialogs/newBuzzDialog'
import NewBlogDialog from './dialogs/newBlogDialog'

export default {
	components: {
		NewBuzzList,
		NewBlogList,
		FolloBuzzList,
		NewBuzzDialog,
		NewBlogDialog
	},
	data() {
		return {
			showNewBuzzDialog: false,
			showNewBlogDialog: false,
			buzzTypeItems: [
				{
					authType: false,
					label: 'NewBuzz',
					effect: 'dark',
					type: 'New'
				},
				{
					authType: false,
					label: 'NewBlog',
					effect: 'plain',
					type: 'NewBlog'
				},
				{
					authType: true,
					label: 'Following',
					effect: 'plain',
					type: 'Follow'
				}
			],
			buzzType: {
				authType: false,
				label: 'NewBuzz',
				effect: 'dark',
				type: 'New'
			}
		}
	},
	async mounted() {
		this.buzzTypeClick(this.buzzTypeItems[0])
	},
	methods: {
		buzzTypeClick(inputItem) {
			console.log('buzzTypeClick', inputItem)
			this.buzzTypeItems.forEach((item) => {
				item.effect = 'plain'
			})
			inputItem.effect = 'dark'
			this.buzzType = inputItem
			if (this.buzzType.type == 'New') {
				this.$refs.FollowBuzzRef.removeScrollEvent()
				this.$refs.NewBlogRef.removeScrollEvent()
				this.$refs.NewBuzzRef.initScrollEvent()
			}
			if (this.buzzType.type == 'NewBlog') {
				this.$refs.FollowBuzzRef.removeScrollEvent()
				this.$refs.NewBuzzRef.removeScrollEvent()
				this.$refs.NewBlogRef.initScrollEvent()
			}

			if (this.buzzType.type == 'Follow') {
				this.$refs.NewBuzzRef.removeScrollEvent()
				this.$refs.NewBlogRef.removeScrollEvent()
				this.$refs.FollowBuzzRef.initScrollEvent()
			}
			this.refreshClick()
		},
		newBuzzClick() {
			if (!this.isLogin) {
				this.$message.success(this.$t('views_login_1'))
				return
			}
			this.showNewBuzzDialog = true
		},
		newBuzzSuccess() {
			//console.log('newBuzzSuccess got')
			this.refreshClick()
		},
		refreshClick() {
			if (this.buzzType.type == 'New') {
				this.$refs.NewBuzzRef.resetQuery()
			}
			if (this.buzzType.type == 'NewBlog') {
				this.$refs.NewBlogRef.resetQuery()
			}
			if (this.buzzType.type == 'Follow') {
				this.$refs.FollowBuzzRef.resetQuery()
			}
		},
		newBlogClick() {
			if (!this.isLogin) {
				this.$message.success(this.$t('views_login_1'))
				return
			}
			this.showNewBlogDialog = true
		},
		newBlogSuccess() {}
	},
	computed: {
		...mapGetters([
			'isLogin',
			'username',
			'userConfig',
			'metaId',
			'currentWallet'
		]),
		// 屏幕宽度
		screenWidth() {
			return this.$store.state.common.screenWidth
		}
	}
}
</script>

<style lang="stylus" scoped>

.contain{
  width: 100vw;
  .center-contain {
    margin: 0px auto;
    .search-center {
    }
    .webWidth{
      width: 800px;
      .buzzTypeTag{
        font-size: 18px;
        margin-right:5px
        width:8rem;
      }
    }
    .h5Width{
      width: 20rem;
      display: flex;
      align-items: columns
      .buzzTypeTag{
        font-size: 18px;
        margin-right:5px
        width:7rem;
      }
    }
    margin-top: 10px;
    left: auto;
    float: center;

  }
}
</style>
